<template>
  <view class="container">
    <view class="header">
      <text class="title">📱 真机震动测试</text>
      <text class="subtitle">专门用于真机环境的震动功能测试</text>
    </view>

    <!-- 设备状态 -->
    <view class="status-card">
      <text class="card-title">设备状态</text>
      <view class="status-item">
        <text class="status-label">环境:</text>
        <text class="status-value" :class="deviceStatus.isReal ? 'success' : 'error'">
          {{ deviceStatus.isReal ? '✅ 真机' : '❌ 非真机' }}
        </text>
      </view>
      <view class="status-item" v-if="deviceStatus.model">
        <text class="status-label">设备:</text>
        <text class="status-value">{{ deviceStatus.model }}</text>
      </view>
      <view class="status-item">
        <text class="status-label">权限:</text>
        <text class="status-value" :class="hasPermission ? 'success' : 'error'">
          {{ hasPermission ? '✅ 已授予' : '❌ 未授予' }}
        </text>
      </view>
    </view>

    <!-- 快速测试 -->
    <view class="test-card">
      <text class="card-title">🚀 快速测试</text>
      <button class="test-btn primary large" @click="quickTest">
        立即测试震动
      </button>
      <button class="test-btn secondary" @click="requestPermission" v-if="!hasPermission">
        请求震动权限
      </button>
    </view>

    <!-- 详细测试 -->
    <view class="test-card">
      <text class="card-title">🔍 详细测试</text>
      <button class="test-btn" @click="testVibrateShort">测试短震动</button>
      <button class="test-btn" @click="testVibrate">测试普通震动</button>
      <button class="test-btn" @click="testNativeVibrate">测试原生震动</button>
      <button class="test-btn" @click="fullDiagnosis">完整诊断</button>
    </view>

    <!-- 测试结果 -->
    <view class="result-card" v-if="testResults.length > 0">
      <text class="card-title">📊 测试结果</text>
      <view class="result-item" v-for="(result, index) in testResults" :key="index">
        <text class="result-method">{{ result.method }}</text>
        <text class="result-status" :class="result.success ? 'success' : 'error'">
          {{ result.success ? '✅ 成功' : '❌ 失败' }}
        </text>
      </view>
    </view>

    <!-- 使用说明 -->
    <view class="help-card">
      <text class="card-title">💡 使用说明</text>
      <text class="help-text">1. 确保在真机上运行此测试</text>
      <text class="help-text">2. 点击"立即测试震动"感受震动效果</text>
      <text class="help-text">3. 如果没有震动，点击"完整诊断"查看问题</text>
      <text class="help-text">4. 根据诊断结果调整手机设置</text>
    </view>

    <!-- 常见问题 -->
    <view class="faq-card">
      <text class="card-title">❓ 震动不工作？</text>
      <text class="faq-item">• 检查手机是否开启触觉反馈</text>
      <text class="faq-item">• 确保手机不在静音模式</text>
      <text class="faq-item">• 关闭省电模式</text>
      <text class="faq-item">• 重启应用后再试</text>
      <text class="faq-item">• 某些手机需要在设置中单独开启应用震动权限</text>
    </view>
  </view>
</template>

<script>
import RealDeviceVibrate from '@/utils/realDeviceVibrate.js';

export default {
  data() {
    return {
      deviceStatus: {
        isReal: false,
        model: '',
        system: ''
      },
      hasPermission: false,
      testResults: []
    };
  },
  
  onLoad() {
    this.initDevice();
  },
  
  methods: {
    // 初始化设备信息
    initDevice() {
      const deviceInfo = RealDeviceVibrate.detectRealDevice();
      this.deviceStatus.isReal = deviceInfo.isRealDevice;
      
      if (deviceInfo.deviceInfo) {
        this.deviceStatus.model = deviceInfo.deviceInfo.model;
        this.deviceStatus.system = deviceInfo.deviceInfo.system;
      }
      
      this.hasPermission = RealDeviceVibrate.checkRealDevicePermission();
    },

    // 请求权限
    requestPermission() {
      RealDeviceVibrate.requestPermission();
      // 延迟检查权限状态
      setTimeout(() => {
        this.hasPermission = RealDeviceVibrate.checkRealDevicePermission();
      }, 1000);
    },

    // 快速测试
    async quickTest() {
      if (!this.deviceStatus.isReal) {
        uni.showToast({
          title: '请在真机上测试',
          icon: 'none'
        });
        return;
      }

      uni.showLoading({ title: '测试中...' });
      
      try {
        // 使用最简单的震动方法
        const success = await new Promise((resolve) => {
          uni.vibrateShort({
            success: () => resolve(true),
            fail: () => resolve(false)
          });
        });

        uni.hideLoading();
        
        if (success) {
          uni.showToast({
            title: '震动测试成功！',
            icon: 'success'
          });
        } else {
          uni.showModal({
            title: '震动测试失败',
            content: '请检查手机设置中的触觉反馈是否开启',
            showCancel: false
          });
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '测试出错',
          icon: 'none'
        });
      }
    },

    // 测试短震动
    async testVibrateShort() {
      const success = await new Promise((resolve) => {
        uni.vibrateShort({
          success: () => resolve(true),
          fail: () => resolve(false)
        });
      });
      
      this.addTestResult('短震动', success);
    },

    // 测试普通震动
    async testVibrate() {
      const success = await new Promise((resolve) => {
        uni.vibrate({
          success: () => resolve(true),
          fail: () => resolve(false)
        });
      });
      
      this.addTestResult('普通震动', success);
    },

    // 测试原生震动
    async testNativeVibrate() {
      const success = await RealDeviceVibrate.nativeVibrate();
      this.addTestResult('原生震动', success);
    },

    // 完整诊断
    async fullDiagnosis() {
      uni.showLoading({ title: '诊断中...' });
      
      try {
        const report = await RealDeviceVibrate.diagnoseRealDevice();
        uni.hideLoading();
        
        // 更新测试结果
        this.testResults = report.vibrationTests.map(test => ({
          method: test.method,
          success: test.success
        }));
        
        // 显示诊断结果
        RealDeviceVibrate.showDiagnosticResult(report);
        
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '诊断失败',
          icon: 'none'
        });
      }
    },

    // 添加测试结果
    addTestResult(method, success) {
      const existingIndex = this.testResults.findIndex(r => r.method === method);
      const result = { method, success };
      
      if (existingIndex >= 0) {
        this.testResults.splice(existingIndex, 1, result);
      } else {
        this.testResults.push(result);
      }
      
      // 显示结果提示
      uni.showToast({
        title: success ? '震动成功' : '震动失败',
        icon: success ? 'success' : 'none'
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  display: block;
  font-size: 44rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.status-card, .test-card, .result-card, .help-card, .faq-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.card-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.status-label {
  font-size: 28rpx;
  color: #666;
}

.status-value {
  font-size: 28rpx;
  font-weight: 500;
}

.status-value.success {
  color: #28a745;
}

.status-value.error {
  color: #dc3545;
}

.test-btn {
  width: 100%;
  padding: 25rpx;
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  font-size: 28rpx;
  background-color: #f8f9fa;
  color: #333;
  border: 2rpx solid #e9ecef;
}

.test-btn.primary {
  background-color: #007aff;
  color: #fff;
  border-color: #007aff;
}

.test-btn.secondary {
  background-color: #6c757d;
  color: #fff;
  border-color: #6c757d;
}

.test-btn.large {
  padding: 35rpx;
  font-size: 32rpx;
  font-weight: 600;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.result-method {
  font-size: 28rpx;
  color: #333;
}

.result-status {
  font-size: 26rpx;
  font-weight: 500;
}

.result-status.success {
  color: #28a745;
}

.result-status.error {
  color: #dc3545;
}

.help-text, .faq-item {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 10rpx;
}

.faq-item {
  margin-bottom: 8rpx;
}
</style>